import React, { useState, useEffect } from 'react';
import {
  View, Text, ScrollView, TouchableOpacity, StyleSheet,
  ImageBackground, Dimensions, AsyncStorage, Alert, DeviceEventEmitter, RNRestart
} from 'react-native';
import Icon from 'react-native-vector-icons/AntDesign';


// {context:'第一个第一个第一个第一个第一个第一个第一个第一个第一个第一个第一个第一个第一个第一个第一个第一个第一个',time:'2021-04-21 18:36:53'},
// {context:'第二个',time:'2021-04-21 18:36:53'},
// {context:'第三个',time:'2021-04-21 18:36:53'},
// {context:'第四个',time:'2021-04-21 18:36:53'},
// {context:'第四个',time:'2021-04-21 18:36:53'},
const TreeHole = ({ navigation, route, props }) => {
  const [Data, setData] = useState([]);
  // componentDidMount(()=>{
  //   this._navListener = this.props.navigation.addListener('didFocus', () => {

  //   })
  //   componentWillUnmount(()=>{
  //     this._navListener.remove();
  //   })
  useEffect(() => {
    AsyncStorage.getItem('data').then(res => {
      if (res) {
        setData(JSON.parse(res))
      }
    })

  }, [route.params?.Data]);

  useEffect(() => {
    // AsyncStorage.getItem('data').then(res=>{
    //         if(res){
    //             setData(JSON.parse(res))
    //         }})
    DeviceEventEmitter.addListener('refresh', (message) => {
      if (message) {
        // 这里面是逻辑实现
        // setData((data) => [...data, message.a] )
        AsyncStorage.getItem('data').then(res => {
          if (res) {
            setData(JSON.parse(res))
          }
        })
      }
    })
  }, []);

  function del(idx) {
    Alert.alert(
      '',
      '你的心事将转化为灵菌，长于树旁，无人知晓。',
      [{
        text: '取消',
        onPress: () => {
          console.log("删除树洞")
        }
      },
      {
        text: '确定',
        onPress: () => {
          let san = Data.splice(idx, 1);
          console.log(san);
          AsyncStorage.setItem('data', JSON.stringify(Data)).then(res => {
            console.log(Data);
            setData(Data);
            DeviceEventEmitter.emit('refresh', {
              'a': Data,
            })
            navigation.navigate('word')

          })
        }
      }]
    )
  }

  return (
    <ImageBackground
      source={require('../../Image/bar4.png')}
      style={styles.main}
      resizeMode='cover'
    >
      <ScrollView >
        <Text style={styles.title}>树洞菌</Text>
        <ScrollView style={styles.list}>
          {
            Data.map((Data, idx) => (
              <TouchableOpacity style={styles.item} key={idx}>
                <View style={styles.itemBar}>
                  <Text style={styles.context}>{Data.context}</Text>
                  <Text style={{ color: '#808080' }}>{Data.time}</Text>
                  <TouchableOpacity style={styles.del} onPress={() => del(idx)}>
                    <Icon size={20} name='closecircleo' color='#CD853F'></Icon>
                    {/*<Text style={{ marginLeft: 5 }}>化菌</Text>*/}
                  </TouchableOpacity>
                </View>
              </TouchableOpacity>
            ))
          }
        </ScrollView>
        <TouchableOpacity style={styles.new} onPress={() => { navigation.push('Newlist') }}>
          <Icon size={45} name='pluscircleo' color='#DEB887'></Icon>
          {/* <Text style={{marginLeft:0}}>新建树洞</Text> */}
        </TouchableOpacity>
      </ScrollView>
    </ImageBackground>
  )
}
export default TreeHole;


const styles = StyleSheet.create({
  main: {
    position: 'relative',
    flex: 1,
    marginLeft: ptd(0),
    marginRight: ptd(0),
    height: h,
  },
  title: {
    width: ptd(375),
    height: 70,
    // backgroundColor:'yellow',
    textAlign: 'center',
    fontSize: 40,
    paddingTop: 20,
    fontWeight:'bold',
    color: 'white',
  },
  list: {
    height: 0.68 * h,
  },
  item: {
    borderTopWidth: 2,
    borderTopColor: 'rgb(230,232,255)',
    paddingLeft: ptd(40),
    color: '#696969',
    backgroundColor: 'rgb(230,232,255)',
    marginTop: 20,
    marginBottom: 20,
    marginRight: 30,
    marginLeft: 30,
    paddingTop: 30,
    borderRadius: 30,
    paddingBottom: 10,
  },
  context: {
    width: 200,
    marginBottom: 10,
  },
  del: {
    flexDirection: 'row',
    // position: 'absolute',
    left: ptd(240),
    bottom: 30,
  },
  new: {
    height: 65,
    paddingLeft: ptd(165),
    paddingTop: 20
  }
})